<template>
    <section style="height: 100%;">
        <div v-if="!userInfo?.userItem?.isAmbassador && (!userInfo?.ambassadorApply || userInfo?.ambassadorApply?.audit_status == 4)"
            class="no-applyed">
            <div class="banner">
                <div class="join" @click="handleApply"></div>
                <img class="banner-img" :src="handleImg('console/ambassador-banner.png')" alt="">
            </div>

            <div class="apply-steps">
                <img class="apply-steps-img" :src="handleImg('console/ambassador-aplly-step.png')" alt="">
            </div>

            <div class="excellent-cases">
                <img class="excellent-cases-img" :src="handleImg('console/excellent-cases.png')" alt="">
            </div>

            <div class="promotion-strategy">
                <div class="join" @click="handleApply"></div>
                <img class="promotion-strategy-img" :src="handleImg('console/promotion-strategy.png')" alt="">
            </div>
        </div>

        <!-- 审核中 -->
        <div v-if="!userInfo?.userItem?.isAmbassador && (userInfo?.ambassadorApply?.audit_status && userInfo?.ambassadorApply?.audit_status !== 4)"
            class="auditing">
            <img src="@/assets/img/console/audit-pending.png" alt="">
            <span>审核中～</span>
        </div>

        <div v-if="userInfo?.userItem?.isAmbassador" class="applyed">
            <div class="banner">
                <img class="banner-img" :src="handleImg('console/promotion-banner.png')" alt="">
            </div>

            <div class="promotion-steps" ref="steps">
                <img class="promotion-steps-img" :src="handleImg('console/promotion-steps.png')" alt="">
                <div class="invitationLink">{{ invitationLink }}</div>
                <div class="invitate-btn" @click="onCopy()"></div>

                <QrCode class="invitation-qrcode" :el="invitationLink" :width="invitationWidth" :height="invitationWidth"
                    v-if="invitationLink && invitationWidth" />

            </div>

            <div class="cashback-rule">
                <img class="cashback-rule-img" src="@/assets/img/console/cashback-rule.png">
            </div>

            <div class="my-commission">
                <img class="my-commission-img" src="@/assets/img/console/my-commission.png" alt="">
                <div class="my-commission-con">
                    <div class="my-commission-item my-commission-item1">
                        <div class="item-label">
                            已关联客户
                        </div>
                        <div class="item-txt">{{ myCommission.customerNum }}</div>
                    </div>

                    <div class="my-commission-item my-commission-item2">
                        <div class="item-label">
                            客户消费金额（未提现）
                        </div>
                        <div class="item-txt">{{ myCommission.totalConsumption }}</div>
                    </div>

                    <div class="my-commission-item my-commission-item3">
                        <div class="item-label">
                            当前返佣级别
                        </div>
                        <div class="item-txt">{{ myCommission.level }}</div>
                    </div>

                    <div class="my-commission-item my-commission-item4">
                        <div class="item-label">
                            可提现佣金
                        </div>
                        <div class="item-txt">{{ myCommission.commission }}</div>
                    </div>
                </div>

                <div class="operate">
                    <span class="mr-8 fz-14 col-8A93A7">本月还可申请{{ myCommission.withdrawCount }}次</span>
                    <a-button type="primary" @click="applyWithdrawal" class="mr-8" v-if="myCommission.withdrawCount > 0">申请提佣</a-button>
                    <a-button type="primary" @click="router.push('/costAccount')">我的账户</a-button>
                </div>
            </div>

        </div>

        <!-- 报名成为云大使 -->
        <a-modal v-model:visible="modalVisible" title="加入云大使" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="realName" label="姓名" :rules="[{ required: true, message: '请输入真实姓名' }]">
                    <a-input placeholder="请输入真实姓名" v-model:value="form.realName"></a-input>
                </a-form-item>
                <a-row>
                    <a-col :span="12">
                        <a-form-item name="channel" label="推广渠道" :rules="[{ required: true, message: '请填写推广渠道' }]">
                            <a-radio-group v-model:value="form.channel" name="radioGroup">
                                <a-radio value="media">自媒体</a-radio>
                                <a-radio value="other">其他</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span='12'>
                        <a-form-item name="mediaName" :rules="[{ required: true, message: '请填写推广渠道' }]">
                            <a-input placeholder="请填写推广渠道" v-model:value="form.mediaName"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item name="contactType" label="联系方式" :rules="[{ required: true, message: '请选择联系方式' }]">
                            <a-radio-group v-model:value="form.contactType" name="radioGroup">
                                <a-radio value="wechat">微信</a-radio>
                                <a-radio value="phone">手机号</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span='12'>
                        <a-form-item name="contact" :rules="[{ required: true, message: '请输入联系方式' }]">
                            <a-input placeholder="请输入联系方式" v-model:value="form.contact"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </section>
</template>

<script setup name="Ambassador">
import { ref, onMounted, nextTick } from 'vue'
import { applyAmbassador, ambassadorIncome } from 'api/modules/api.ambassador'
import { XsyMessage } from '@/libs/util.toast'
import { useRouter } from 'vue-router'
import clipboard3 from "vue-clipboard3";
import userInfoStore from '@/stores/userInfo.js'
import QrCode from '@/components/common/QrCode.vue'

const router = useRouter()
const modalVisible = ref(false)
const form = ref({})

const userInfo = ref({})
userInfo.value = userInfoStore().userInfo

const handleApply = () => {
    modalVisible.value = true
}

const handleOk = () => {
    applyAmbassador(form.value).then((res) => {
        if (res.code == 0) {
            XsyMessage.success('已提交审核');
            modalVisible.value = false
            userInfoStore().getUserInfo().then(() => {

            })
        }
    })
}

// 点击取消重置表单
const formRef = ref();
const handleCancel = () => {
    formRef.value.resetFields();
}

// 我的佣金
const myCommission = ref({})
const getIncome = () => {
    ambassadorIncome().then(res => {
        myCommission.value = res.data
    })
}

userInfo.value?.userItem?.isAmbassador && getIncome()

// 邀客有利
const steps = ref(null)
const invitationWidth = ref()
onMounted(() => {
    nextTick(() => {
        invitationWidth.value = (200 * steps.value.offsetWidth) / 1920
    })

})

const invitationLink = ref('')
const str = `user=${encodeURIComponent("好友")}&invitedUserId=${userInfo.value?.userItem?.userId}&source=amb`
invitationLink.value = window.location.origin + '/login?' + str

// 复制功能
const { toClipboard } = clipboard3();
const onCopy = async () => {
    try {
        await toClipboard(invitationLink.value);
        XsyMessage.success('复制成功')
    } catch (e) {
        console.error(e);
    }
}

// 申请提现
const applyWithdrawal = () => {
    router.push({ path: '/applyWithdrawal', query: { commission: myCommission.value.commission } })
}

</script>

<style scoped lang="scss">
.banner {
    position: relative;

    .join {
        width: 11.7%;
        height: 13.3%;
        position: absolute;
        left: 33.4%;
        top: 77.6%;
        cursor: pointer;
    }

    .banner-img {
        display: block;
        width: 100%;
    }
}

.apply-steps {
    .apply-steps-img {
        display: block;
        width: 100%;
    }
}

.excellent-cases {
    img {
        display: block;
        width: 100%;
    }
}

.promotion-strategy {
    position: relative;

    .join {
        width: 11%;
        height: 6%;
        position: absolute;
        left: 22%;
        bottom: 4%;
        cursor: pointer;
    }

    .promotion-strategy-img {
        display: block;
        width: 100%;
    }
}

.promotion-steps {
    position: relative;

    img {
        display: block;
        width: 100%;
    }

    .invitationLink {
        position: absolute;
        left: 30.6%;
        top: 60%;
        width: 30%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9vw;
    }

    .invitate-btn {
        position: absolute;
        cursor: pointer;
        width: 8%;
        height: 3.6%;
        left: 64%;
        top: 59.34%;
    }

    .invitation-qrcode {
        position: absolute;
        left: 44.3%;
        top: 68%;
        width: 10.4%;
        height: 14.6%;
    }

}

.my-link {
    padding: 0 70px;
    margin-bottom: 70px;

    .qrcode {
        width: 180px;
        height: 180px;
        margin: 0 auto 20px;
    }

    .txt {
        color: #07F;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
    }
}

.cashback-rule {
    img {
        display: block;
        width: 100%;
    }
}

.my-commission {
    position: relative;

    .my-commission-img {
        display: block;
        width: 100%;
    }

    .my-commission-con {
        position: absolute;
        left: 9.5%;
        top: 37.3%;
        display: flex;
        width: 81.5%;
        height: 28.1%;
        justify-content: space-between;

        // margin: 0 auto;
        .my-commission-item {
            width: 22.6%;
            height: 100%;
            text-align: center;
        }

        .my-commission-item1 {
            background-image: url('@/assets/img/console/my-commission1.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .my-commission-item2 {
            background-image: url('@/assets/img/console/my-commission2.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .my-commission-item3 {
            background-image: url('@/assets/img/console/my-commission3.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .my-commission-item4 {
            background-image: url('@/assets/img/console/my-commission4.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .item-label {
            color: #000000;
            font-family: PingFang HK;
            font-style: normal;
            font-size: 1.1vw;
            line-height: normal;
            margin-bottom: 15%;
            margin-top: 10%;
        }

        .item-txt {
            color: #1841E2;
            font-family: PingFang HK;
            font-style: normal;
            font-size: 1.7vw;
            font-weight: 600;
            line-height: normal;
        }
    }

    .operate {
        position: absolute;
        width: 100%;
        top: 78.6%;
        text-align: center;
    }
}



.title {
    color: #223354;
    font-family: PingFang SC;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin-bottom: 50px;
}

.auditing {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    img {
        display: block;
        width: 346px;
        height: 346px;
        margin-bottom: 24px;
    }

    span {
        color: #8A93A7;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}
</style>